<template>
  <div>
    <!-- <div>
      <el-row>
        <el-col :span="6">
          <el-input placeholder="搜索" v-model="filters[0].value"></el-input>
        </el-col>
      </el-row>
    </div> -->
    <!-- <data-tables :data="tableData" :filters="filters" :action-col="actionCol" :page-size="pageSizeNum" :pagination-props="{ pageSizes: [pageSizeNum, pageSizeNum * 2, pageSizeNum * 4] }"> -->
    <data-tables :data="tableData" layout="table" :table-props="{'height': height}">
      <!-- <el-table-column v-for="title in tableTitle" -->
      <af-table-column v-for="title in tableTitle"
        :prop="title.prop"
        :label="title.label"
        :key="title.prop"
        sortable
        :show-overflow-tooltip="true"
        
      >
        <!--插入图片链接的代码-->
        <template slot-scope="scope">
          <!-- <img :src="scope.row.image_url||scope.row.profile_url" style="width: 0.3rem;height: 0.3rem" v-if="title.prop === 'image_url' || title.prop === 'profile_url'"/>
          <span v-else>{{ !!scope.row[title.prop] ? scope.row[title.prop] : '-' }}</span> -->
          <!-- <span v-if="this.methodsFun.isType(scope.row[title.prop]) === 'number' ">{{ scope.row[title.prop] }}</span> -->
          <span>{{ !!scope.row[title.prop] ? scope.row[title.prop] : '0' }}</span>
        </template>
      </af-table-column>
      <!-- </el-table-column> -->
    </data-tables>
  </div>
</template>

<script>
import { DataTables, DataTablesServer } from 'vue-data-tables'
import lang from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'
import Vue from 'vue'
Vue.use(DataTables)
Vue.use(DataTablesServer)
locale.use(lang)

export default {
  name: 'table_public',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableTitle: {
      type: Array,
      default: () => []
    },
    actionCol: {
      type: Object,
      default: () => {}
    },
    height: {
      type: String,
      default: () => '1rem'
    },
    pageSizeNum: {
      type: Number,
      default: () => 5
    }
  },
  data () {
    return {
      filters: [{
        prop: [],
        value: ''
      }]
    }
  },
  methods: {},
  mounted () {
    this.tableTitle.forEach((item, index) => this.filters[0].prop.push(item.prop))
  }
}
</script>

<style lang="scss">
// .el-table, .el-table__expanded-cell, .el-table th, .el-table tr {
//   background-color transparent!important
// }
.el-table .cell, .el-table th div {
  padding: 0!important;
}
.el-table td, .el-table th.is-leaf {
  border-bottom:1px solid #9e9d9d;
  border-right: 1px solid #9e9d9d;
}
.el-table td:last-of-type, .el-table th.is-leaf:nth-last-of-type(2) {
  border-right: none;
}
.el-row {
  .el-col-6 {
    float: right;
    .el-input__inner {
      text-align: center;
      font-size: 0.14rem;
      border: 1px solid silver;
      border-radius: 5px;
    }
  }
}
.el-table {
  border: 1px solid #9e9d9d;
  border-radius: 4px;
  // border-right: none;
  thead {
    color: #333;
    font-size: .18rem;
    background: #1b4978;
  }
  th {
    background: #eaeaea;
  }
  .cell {
    text-align: center;
  }
}
.sc-table {
  .pagination-bar {
    margin-top: 0.2rem;
  }
}

#liandongtable table thead tr th:not(:first-child),
#liandongtable table tbody tr td:first-child{
  font-family: '楷体';
  // color:red;
}

    // background #1b4978
// .el-table--enable-row-hover .el-table__body tr:hover>td
//   background #2a556f!important
//   cursor pointer
// .el-table .cell
//   text-align center
//   color #333
// .el-row
//    .el-col-6
//       float right
// .el-input__inner
//   text-align: center
//   font-size: 0.14rem
//   color: white
//   border: 1px solid silver
//   border-radius: 5px
//   // padding: 0.04rem
//   // height auto
//   // line-height inherit
//   background: rgba(8,23,44,0.35)
// .pagination-bar
//   margin .2rem 0
// .el-pagination__jump
//   display none!important
// .el-pagination__total
//   color #333
//   font-size 0.16rem
// .el-pagination button:disabled, .el-pagination .btn-prev,
// .el-pagination .btn-next, .el-pager li
//   background transparent
// .el-pagination .btn-next, .el-pagination .btn-prev, .el-pager li
//   color white
//   border 1px solid #333
// .el-pager li, .el-pagination button
//   &:hover
//     color: #fff
//     cursor: pointer
//     background #31708f
// .el-pager li.active
//     color: #fff
//     background #31708f
</style>
